<%@ page language="java" pageEncoding="UTF-8"%>
<%
	String lib = request.getContextPath();
%>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
	content="A layout example with a side menu that hides on mobile, just like the Pure website.">
<title>摇摇乐 后台管理</title>
<link rel="stylesheet"
	href="http://yui.yahooapis.com/pure/0.4.2/pure.css">
<!--[if lte IE 8]>
        <link rel="stylesheet" href="${lib}css/layouts/side-menu-old-ie.css">
    <![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="../css/layouts/side-menu.css">
<!--<![endif]-->
</head>
<body>
	<div id="layout">
		<!-- Menu toggle -->
		<a href="#menu" id="menuLink" class="menu-link"> <!-- Hamburger icon -->
			<span></span>
		</a>
		<div id="menu">
			<div class="pure-menu pure-menu-open">
				<a class="pure-menu-heading" href="#">管理菜单</a>
				<ul>
					<li class="menu-item-divided pure-menu-selected"><a
						href="index.jsp">主页</a></li>
					<li><a href="poemadd.jsp">彩票填写</a></li>
					<li><a href="#">摇摇乐后台服务</a></li>
				</ul>
			</div>
		</div>
		<div id="main">
			<div class="header">
				<h1>欢迎您</h1>
				<h2>请进行后台设置</h2>
			</div>

			<div class="content">
				<h2 class="content-subhead">How to use this layout</h2>
				<p>
					To use this layout, you can just copy paste the HTML, along with
					the CSS in <a href="/css/layouts/side-menu.css" alt="Side Menu CSS">side-menu.css</a>,
					and the JavaScript in <a href="/js/ui.js">ui.js</a>. The JS file
					uses vanilla JavaScript to simply toggle an
					<code>active</code>
					class that makes the menu responsive.
				</p>
				<h2 class="content-subhead">Now Let's Speak Some Latin</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
					do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
					enim ad minim veniam, quis nostrud exercitation ullamco laboris
					nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
					reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
					pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
					culpa qui officia deserunt mollit anim id est laborum.</p>
				<div class="pure-g">
					<div class="pure-u-1-4">
						<img class="pure-img-responsive"
							src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg"
							alt="Peyto Lake">
					</div>
					<div class="pure-u-1-4">
						<img class="pure-img-responsive"
							src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg"
							alt="Train">
					</div>
					<div class="pure-u-1-4">
						<img class="pure-img-responsive"
							src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg"
							alt="T-Shirt Store">
					</div>
					<div class="pure-u-1-4">
						<img class="pure-img-responsive"
							src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg"
							alt="Mountain">
					</div>
				</div>
				<h2 class="content-subhead">Try Resizing your Browser</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
					do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
					enim ad minim veniam, quis nostrud exercitation ullamco laboris
					nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
					reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
					pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
					culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
	</div>
	<script src="../js/ui.js"></script>
</body>
</html>
